<template>
  <div>

    <div>
      <el-form :inline="true" :model="studentPlanForm" :rules="rule" ref="studentPlanForm" class="demo-form-inline">
      <el-form-item prop="majorInfo">

        <el-select v-model="studentPlanForm.majorInfo" placeholder="请选择专业">
          <el-option v-for="major in majorAll" :key="major.majorName" :label="major.majorName" :value="major.majorName">
          <span>{{ major.majorName }}</span>
          </el-option>
        </el-select>

      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('studentPlanForm')">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click.native="addDetail()">添加计划</el-button>
      </el-form-item>
      </el-form>
    </div>

  <el-table
    ref="multipleTable"
    :data="tableData.list"
    tooltip-effect="dark"
    style="width: 100%">
    <el-table-column
      prop="enrollId"
      label="序号">
    </el-table-column>
    <el-table-column
      prop="major.majorName"
      label="专业">
    </el-table-column>
    <el-table-column
      prop="enrollStudentNum"
      label="招生人数">
    </el-table-column>
    <el-table-column
      prop="enrollTuition"
      label="学费信息">
    </el-table-column>
    <el-table-column
      prop="enrollEduSystem"
      label="学制">
    </el-table-column>
    <el-table-column
      prop="enrollArea"
      label="招生区域">
    </el-table-column>
    <el-table-column
      prop="enrollModel"
      label="招生分类">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
       <el-button
         type="primary" icon="el-icon-edit" size="small" @click.native="showDetail(scope.row.enrollId)">
       </el-button>
       <el-button
         type="primary" icon="el-icon-delete" size="small"
         @click="StudentDel(scope.row.enrollId)">
       </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage3"
      :page-size="pageSize"
      layout="total,prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>

  <el-dialog title="添加招生计划" :visible.sync="dialogFormVisible">
    <div style="margin: 10px;"></div>

     <el-form :model="gridAddData" :rules="rules" ref="gridAddData" label-width="100px" class="demo-ruleForm">

       <el-form-item label="专业名称:" prop="majorId">
         <el-select v-model="gridAddData.majorId" placeholder="请选择专业" size="200px">
           <el-option v-for="major in majorAll" :key="major.majorId" :label="major.majorName" :value="major.majorId">
           <span>{{ major.majorName }}</span>
           </el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="招生人数:" prop="enrollStudentNum">
         <el-input v-model="gridAddData.enrollStudentNum"></el-input>
       </el-form-item>
       <el-form-item label="学费信息:" prop="enrollTuition">
         <el-input v-model="gridAddData.enrollTuition"></el-input>
       </el-form-item>
       <el-form-item label="学制信息:" prop="enrollEduSystem">
         <!-- <el-input v-model="gridAddData.enrollEduSystem"></el-input> -->
         <el-select v-model="gridAddData.enrollEduSystem" placeholder="选择学制信息" size="200px">
           <el-option label="1年" value="1"></el-option>
           <el-option label="2年" value="2"></el-option>
           <el-option label="3年" value="3"></el-option>
           <el-option label="4年" value="3"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="招生分类" prop="enrollModel">
         <el-select v-model="gridAddData.enrollModel" placeholder="选择查询类型" size="200px">
           <el-option label="专升本" value="专升本"></el-option>
           <el-option label="本科" value="本科"></el-option>
           <el-option label="专科" value="专科"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="招生区域:" prop="enrollArea">
         <el-input v-model="gridAddData.enrollArea"></el-input>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="submitFormAdd('gridAddData')">提交</el-button>
         <el-button @click="resetForm('gridAddData')">重置</el-button>
       </el-form-item>
     </el-form>

   </el-dialog>

  <el-dialog title="修改招生计划" :visible.sync="dialogFormVisiblee">
    <div style="margin: 10px;"></div>
       <el-form :label-position="labelPosition" label-width="80px" :model="gridData" ref="gridData">
           <!-- <el-form-item label="专业名称:">
             <el-input v-model="gridData.enrollStudents.major.majorName" ></el-input>
           </el-form-item> -->
           <el-form-item label="专业名称:" prop="majorId">
             <el-select v-model="gridData.majorId" placeholder="gridData.major.majorName" size="200px">
               <el-option v-for="major in majorAll" :key="major.majorId" :label="major.majorName" :value="major.majorId">
               <span>{{ major.majorName }}</span>
               </el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="招生人数:">
            <el-input v-model="gridData.enrollStudentNum" ></el-input>
           </el-form-item>
           <el-form-item label="学费信息:">
            <el-input v-model="gridData.enrollTuition" ></el-input>
           </el-form-item>
           <el-form-item label="学制信息:">
            <!-- <el-input v-model="gridData.enrollEduSystem" ></el-input> -->
            <el-select v-model="gridData.enrollEduSystem" placeholder="gridData.enrollEduSystem" size="200px">
              <el-option label="1年" value="1"></el-option>
              <el-option label="2年" value="2"></el-option>
              <el-option label="3年" value="3"></el-option>
              <el-option label="4年" value="3"></el-option>
            </el-select>
           </el-form-item>
           <el-form-item label="招生分类">
             <el-select v-model="gridData.enrollModel" placeholder="选择查询类型" size="200px">
               <el-option label="专升本" value="专升本"></el-option>
               <el-option label="本科" value="本科"></el-option>
               <el-option label="专科" value="专科"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="招生区域:">
             <el-input v-model="gridData.enrollArea" ></el-input>
           </el-form-item>
        </el-form>
     <div slot="footer" class="dialog-footer" model="gridData">
          <el-button type="primary" v-model="gridData.isShow" @click="submitFormUp('gridData')">确 定</el-button>
     </div>
   </el-dialog>
  </div>

</template>

<script>
  import {StudentPlanFy,StudentPlanDel,StudentPlanSel,StudentPlanUp,StudentPlanAdd,majormanageAll} from '@/axios/api'
  export default {
    methods: {
      handleClick(row) {
        console.log(row);
      }
    },

    data() {

      return {
        id:'',
        tableData: {},
        total:1,
        pageSize:1,
        pageIndex:1,
        currentPage3: 1,
        dialogFormVisible: false,
        dialogFormVisiblee: false,
        labelPosition: 'right',

        gridData:{
          major:{
          }
        },
        majorAll:[],
        gridAddData:{
          majorId: '',
          enrollTuition:'',
          enrollEduSystem:'',
          enrollModel:'',
          enrollArea: '',
          enrollStudentNum: ''
        },
        studentPlanForm:{
          majorInfo:'',
        },
        rules: {
          majorId: [
            { required: true, message: '请选择专业名称', trigger: 'blur' }
          ],
          enrollStudentNum: [
            { required: true, message: '请输入招生人数', trigger: 'blur' }
          ],
          enrollTuition: [
            { required: true, message: '请输入学费信息', trigger: 'blur' }
          ],
          enrollEduSystem: [
            { required: true, message: '请输入学制信息', trigger: 'blur' }
          ],
          // enrollModel: [
          //   { required: true, message: '请输入招生分类', trigger: 'blur' }
          // ],
          enrollModel: [
            { required: true, message: '请选择招生分类', trigger: 'change' }
          ],
          enrollArea: [
            { required: true, message: '请输入招生区域', trigger: 'blur' }
          ],
        },
        rule:{
          majorInfo:[
            { required: true, message: '请选择专业', trigger: 'change' }
          ]
        }
      }
    },

    methods: {

      /**
       * 添加提交
       */
      submitFormAdd(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //alert('submit!');
            let user = JSON.parse(window.localStorage.getItem("admin-user"));
            //  user =JSON.parse(user);
              let paramss = {
                majorId:this.gridAddData.majorId,enrollStudentNum:this.gridAddData.enrollStudentNum,enrollTuition:this.gridAddData.enrollTuition,
                enrollEduSystem:this.gridAddData.enrollEduSystem,enrollModel:this.gridAddData.enrollModel,enrollArea:this.gridAddData.enrollArea,
                enrollModifyPerson:user.teacherRealname
              };
            StudentPlanAdd(paramss).then(res =>{
              if(res.status == '200'){
                this.$message({
                  message: res.message,
                  type: 'success',
                });
                console.log(this.gridAddData);
              }
            });
            this.dialogFormVisible = false;
            let params = {pageIndex:this.pageIndex};
            majormanageAll().then(res =>{
              this.majorAll = res.resData;
              console.log(this.majorAll);
            });
            this.planList(params)
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        this.resetForm(formName);
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },

      planList(params){
        StudentPlanFy(params).then(res =>{
          this.tableData =  res.resData,
          this.total = res.resData.total,
          this.pageSize = res.resData.pageSize
        })
      },

      /**
       * 查询提交
       */
      submitForm(formName){
        let params = {majorName:this.studentPlanForm.majorInfo,pageIndex:1};
        console.log(this.studentPlanForm);
        this.$refs[formName].validate((valid) => {
          if (valid) {
            StudentPlanFy(params).then(res =>{
              console.log(res.resData);
              console.log(this.studentPlanForm);
              this.tableData = res.resData;
              this.total = res.resData.total,
              this.pageSize = res.resData.pageSize
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

      /**
       * 分页
       */
       handleSizeChange(val) {
         console.log(`每页 ${val} 条`);
       },
       handleCurrentChange(val) {
         console.log(`当前页: ${val}`);
         let params = {pageIndex:val};
         this.planList(params)
       },
       /**
        * 删除招生计划
        */
       StudentDel(enrollId){
         let param = {enrollId:enrollId}
         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         }).then(() => {
           StudentPlanDel(param).then(res =>{
             console.log(param);
             if(res.status == '200'){
               this.$message({
                 message: res.message,
                 type: 'success'
               });
             }
           });
           let params = {pageIndex:this.pageIndex};
           majormanageAll().then(res =>{
             this.majorAll = res.resData;
             console.log(this.majorAll);
           });
           this.planList(params)
       }).catch(() => {
         this.$message({
           type: 'info',
           message: '已取消删除'
         });
       });
       },

       /**
        * 查询详情
        */
       showDetail(val){
         let param = {enrollId:val};
         this.id =  val;
         this.dialogFormVisiblee=true;
         console.log(param);
         StudentPlanSel(param).then(res =>{
           this.gridData = res.resData;
         })
       },

       /**
        * 修改
        */
      submitFormUp(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //alert('submit!');
            let user = JSON.parse(window.localStorage.getItem("admin-user"));
              //user =JSON.parse(user);
              let paramss = {
                majorId:this.gridData.majorId,enrollStudentNum:this.gridData.enrollStudentNum,enrollTuition:this.gridData.enrollTuition,
                enrollEduSystem:this.gridData.enrollEduSystem,enrollModel:this.gridData.enrollModel,enrollArea:this.gridData.enrollArea,
                enrollId:this.id,enrollModifyPerson:user.teacherRealname
              };
            StudentPlanUp(paramss).then(res =>{
              if(res.status == '200'){
                this.$message({
                  message: res.message,
                  type: 'success',
                });
                console.log(this.gridData);
              }
            });
            this.dialogFormVisiblee = false;
            let params = {pageIndex:this.pageIndex};
            majormanageAll().then(res =>{
              this.majorAll = res.resData;
              console.log(this.majorAll);
            });
            this.planList(params)
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

      /**
       * 添加
       */
      addDetail(){
        this.dialogFormVisible=true;
      },

    },
    mounted(){
      let params = {pageIndex:this.pageIndex};
      majormanageAll().then(res =>{
        this.majorAll = res.resData;
        console.log(this.majorAll);
      });
      this.planList(params)
    }
  }

</script>
